<template>
  <div id="logDetail">
    <com-head :opacity='0'></com-head>
    <!-- 记录 -->
    <div class="notice">
        <div class="left">
            <p>{{content}}</p>
            <p>发件人：{{name}}</p>
            <p>{{time}}</p>
        </div>
        <div class="right">内容：{{message}}</div>
        <!-- <div class="btn" @click="replayTo" v-if="reply==='系统发送'"><button>回复</button></div> -->
        <router-link tag="div"  v-if="!replay" :to="{name: 'huifu',query:{id: huifuid}}" class="mes"><i class="iconfont icon-xinfeng"></i></router-link>        
    </div>

    <div class="notice" v-if="replay">
        <div class="right">回复：{{replay}}</div>
    </div>

  </div>
</template>

<script>
export default {
  name: "logDetail",
  data() {
    return {
          content: "",
          name: "",
          time: "",
          message: '',
          replay: ' ',
          huifuid: ''
    };
  },
  mounted () {
    this.loading();
  },
  methods: {
    loading(){
      this.axios.post("apiindex/messageinfo", {
          token: this.token(),
          id: this.$route.query.id
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.content = data.data.title;
            this.time = data.data.create_time;
            this.message = data.data.content;
            this.name = data.data.send_id;
            this.replay = data.data.huifu;
            this.huifuid = data.data.id;
            this.$bus.$emit("toast", data.data);            
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    replayTo () {
      this.$router.push({name:'feedback',query:{id: this.$route.query.id}})
    }
  }
};
</script>

<style lang="scss">
#logDetail {
  background:rgba(246,246,246,1);
  .notice {
    margin-top: 20px;
    border-bottom: 1Px solid #eee;
    padding: 30px 32px;
    background-color: #fff;
    position: relative;
    .left {
      width: 686px;
      position: relative;
      p:nth-of-type(1) {
        width: 686px;
        font-size: 30px;
        font-family: PingFangSC-Medium;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 60px;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      p:nth-of-type(2),
      p:nth-of-type(3) {
        font-size: 26px;
        color: #666;
        line-height: 50px;
      }
    }
    .right {
      font-size:30px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(0,0,0,1);
      line-height:50px;
    }
    .btn {
      text-align: right;
      button {
        background-color: #0A89AC;
        padding: 10px;
        color: #fff;
        border-radius: 4px;
      }
    }
    .mes {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      background: rgba(10, 137, 172, 1);
      position: absolute;
      top: 40px;
      right: 32px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
  }
}
</style>
